<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>PRINCIPAIS ATRIBUTOS DO CSS</title>
    <link href="../Css.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>

    <div id ="style">
        <center><h1>PRINCIPAIS ATRIBUTOS DO CSS</h1></center>
            <b>Atributo:</b> color (valor RGB ou nome da cor)<br/>
            color: #009900;<br/>
            color: red;<br/>
            <i>Serve para indicar a cor do texto. Admitem quase todas as etiquetas de HTML. <br/>
            Nem todos os nomes de cores são admitidos no padrão, é aconselhável então utilizar o valor RGB.<br/><br/></i>

            <b>Atributo:</b>  font-size ( xx-small | x-small | small | medium | large | x-large | xx-large ) - Unidades de CSS<br/>
            font-size:12pt;<br/>
            font-size: x-large;<br/>
            <i>Serve para indicar o tamanho das fontes de forma mais rígida e com maior exatidão.<br/><br/></i>

            <b>Atributo:</b>  font-family (serif | sans-serif | cursive | fantasy | monospace) - Todas as fontes habituais<br/>
            font-family:arial,helvetica;<br/>
            font-size: fantasy;<br/>
            <i>Com este atributo indicamos a familia de tipografia do texto.<br/>
            Os primeiros valores são genéricos, ou seja, os exploradores as compreendem<br/>
            e utilizam as fontes que o usuário tenha em seu sistema.<br/>
            Também podem se definir com tipografias normais, como ocorria em html.<br/>
            Se o nome de uma fonte tem espaços se utilizam aspas para que se entenda bem.<br/><br/></i>

            <b>Atributo:</b>  font-weight (normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 <br/>
            | 600 | 700 | 800 | 900) - font-weight:bold;<br/>
            font-weight: 200;<br/>
            <i>Serve para definir a largura dos caracteres, ou com outras palavras, <br/>
            para colocar negritas com total liberdade.<br/>
            Normal e 400 são o mesmo valor, assim como bold e 700.<br/><br/></i>

            <b>Atributo:</b>  font-style ( normal | italic | oblique)<br/>
            font-style:normal;<br/>
            font-style: italic;<br/>
            <i>É o estilo da fonte, que pode ser normal, itálico ou oblíquo. O estilo oblíquo é similar ao itálico.<br/><br/></i>

           <b>Atributo:</b>  line-height (normal e unidades CSS)<br/>
            line-height: 12px;<br/>
            line-height: normal;<br/>
            <i>A altura de uma linha, e portanto, o espaçamento entre linhas.<br/>
            É uma dessas características que não se podiam modificar utilizando HTML.<br/><br/></i>

            <b>Atributo:</b>  text-decoration (none | [ underline || overline || line-through ])<br/>
            text-decoration: none;<br/>
            text-decoration: underline;<br/>
            <i>Para estabelecer a decoração de um texto, ou seja, se está sublinhado, tachado, etc.<br/><br/></i>

            <b>Atributo:</b>  text-align (left | right | center | justify)<br/>
            text-align: right;<br/>
            text-align: center;<br/>
            <i>Serve para indicar o alinhamento do texto.<br/>
            É interessante destacar que as folhas de estilo permitem o justificado de texto,<br/>
            mesmo assim, lembre-se que não tem porque funcionar em todos os sistemas.<br/><br/></i>

            <b>Atributo:</b>  text-indent - Unidades CSS<br/>
            text-indent: 10px;<br/>
            text-indent: 2in;<br/>
            <i>Um atributo que serve para fazer recuos ou margens nas páginas. Muito útil e novo.<br/><br/></i>

            <b>Atributo:</b>  text-transform (capitalize | uppercase | lowercase | none)<br/>
            text-transform: none;<br/>
            text-transform: capitalize;<br/>
            <i>Permite-nos transformar o texto, fazendo com que tenha a primeira letra em maiúsculas de todas as palavras,<br/>
            tudo em maiúsculas ou minúsculas.<br/><br/></i>

            <b>Atributo:</b> Background-color (Uma cor, com seu nome ou seu valor RGB)<br/>
            background-color: green;<br/>
            background-color: #000055;<br/>
            <i>Serve para indicar a cor de fundo de um elemento da página.<br/><br/></i>

            <b>Atributo:</b>  Background-image ( O nome da imagem com seu caminho relativo ou absoluto)<br/>
            background-image: url(mármol.gif) ;<br/>
            background-image: url(http://www.x.com/fondo.gif)<br/>
            <i>Colocamos com este atributo uma imagem de fundo em qualquer elemento da página.<br/><br/></i>

            <b>Atributo:</b>  Margin-left (Unidades CSS)<br/>
            margin-left: 1cm;<br/>
            margin-left: 0,5in;<br/>
            <i>Indicamos com este atributo o tamanho da margem à esquerda.<br/><br/></i>

            <b>Atributo:</b>  (Margin-right) - Unidades CSS<br/>
            margin-right: 5%;<br/>
            margin-right: 1in;<br/>
            <i>Utiliza-se para definir o tamanho da margem à direita.<br/><br/></i>

            <b>Atributo:</b>  Margin-top ( Unidades CSS)<br/>
            margin-top: 0px;<br/>
            margin-top: 10px;<br/>
            <i>Indicamos com este atributo o tamanho da margem acima da página.<br/><br/></i>

            <b>Atributo:</b>  Margin-bottom (Unidades CSS)
            margin-bottom: 0pt;<br/>
            margin-top: 1px;<br/>
            <i>Com ele indica-se o tamanho da margem na parte debaixo da página.<br/><br/></i>

            <b>Atributo:</b>  Padding-left (Unidades CSS)
            padding-left: 0.5in;<br/>
            padding-left: 1px;<br/>
            <i>Indica o espaço inserido, pela esquerda, entre a borda do elemento que contem e o conteúdo deste.<br/>
            É parecido ao atributo cellpadding das tabelas.<br/>
            O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.<br/><br/></i>

            <b>Atributo:</b>  Padding-right (Unidades CSS)<br/>
            padding-right: 0.5cm;<br/>
            padding-right: 1pt;<br/>
            <i>Indica o espaço inserido, neste caso pela direita, entre a borda do elemento que contém e o conteúdo deste.<br/>
            É parecido ao atributo cellpadding das tabelas.<br/>
            O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.<br/><br/></i>

            <b>Atributo:</b>  Padding-top (Unidades CSS)<br/>
            padding-top: 10pt;<br/>
            padding-top: 5px;<br/>
            <i>Indica o espaço inserido, por cima, entre a borda do elemento que contem e o conteúdo deste.<br/><br/></i>

            <b>Atributo:</b>  Padding-bottom (Unidades CSS)<br/>
            padding-right: 0.5cm;<br/>
            padding-right: 1pt;<br/>
            <i>Indica o espaço inserido, neste caso por baixo, entre a borda do elemento que contém e o conteúdo deste.<br/><br/></i>

            <b>Atributo:</b>  Border-color (cor RGB e nome de cor)<br/>
            border-color: red;<br/>
            border-color: #ffccff;<br/>
            <i>Para indicar a cor da borda do elemento da página a qual aplicamo-la. Pode-se colocar cores separadas<br/>
            com os atributos border-top-color, border-right-color, border-bottom-color, border-left-color.<br/><br/></i>

            <b>Atributo:</b>  Border-style (none | dotted | solid | double | groove | ridge | inset | outset)<br/>
            border-style: solid;<br/>
            border-style: double;<br/>
            <i>O estilo da bordea, os valores significam: none=nenhuma borda, dotted=pontilhado (não parece funcionar), <br/>
            solid=sólido, double=borda dupla, e desde groove até outset são bordas com vários efeitos 3D.<br/><br/></i>

            <b>Atributo:</b>  border-width ( Unidades CSS)<br/>
            border-width: 10px;<br/>
            border-width: 0.5in;<br/>
            <i>O tamanho da borda do elemento ao qual o aplicamos.<br/><br/></i>

            <b>Atributo:</b>  float (none | left | right)<br/>
            float: right;<br/>
            <i>Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto<br/>
            se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left.<br/><br/></i>

            <b>Atributo:</b> clear (none | right | left)<br/>
            clear: right;<br/>
            <i>Se este elemento tem a sua altura imagens ou outros elementos alinhados à direita ou à esquerda,<br/>
            com o atributo clear fazemos com que se coloque em um lugar onde já não tenha estes<br/>
            elementos ao lado que indicamos.<br/><br/></i>

            <center><a href="Home.html">Voltar ao inicio<br/><br/></a></center>


             
    </div>
      
    
</body>
</html>